<template>
    <div>
        <a-row style="margin-bottom: 10px">
            <a-col :xs="6" :sm="6" :md="6" :lg="6" style="padding-right: 5px">
                <a-select v-model="event">
                    <a-select-option v-for="item in events" :value="item.name" :key="item.name" :disabled="isUsedEvent(item.name) && item.name !== event">{{ item.displayName }}</a-select-option>
                </a-select>
            </a-col>
            <a-col :xs="1" :sm="1" :md="1" :lg="1" style="text-align:center;padding-right: 5px">
                的
            </a-col>
            <a-col :xs="8" :sm="8" :md="8" :lg="8" style="padding-right: 5px">
                <a-select v-model="property">
                    <a-select-option v-if="item.name.indexOf('events') === 0" v-for="item in properties" :value="item.name.slice(item.name.indexOf('.')+1)" :key="item.name">{{ item.displayName }}</a-select-option>
                </a-select>
            </a-col>
            <a-col :xs="6" :sm="6" :md="6" :lg="6"  style="padding-right: 5px">
                <a-button icon="minus" v-on:click="$parent.removeItem(index)"></a-button>
                <a-button icon="plus" v-if="isLast()" v-on:click="$parent.addItem"></a-button>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    export default {
        name: "SubDimension",
        props: {
            events: Array,
            properties: Array,
            dimension: Array,
            index: Number
        },
        data: function () {
            return {
                event: "",
                property: "",
            };
        },
        computed: {
            subDimension: function () {
                return "events."+this.event + "." + this.property;
            }
        },
        methods: {
            isLast: function() {
                return this.dimension.length === (this.index + 1) && this.dimension.length !== this.events.length;
            },
            isUsedEvent: function(event) {
                for(let i = 0; i < this.dimension.length; i++) {
                    let tokens = this.dimension[i].split(".");
                    if(tokens.length === 3 && tokens[1] === event) {
                        return true;
                    }
                }
                return false;
            },
            init: function () {
                let tokens = this.dimension[this.index].split(".");
                if(tokens.length === 3) {
                    this.event = tokens[1];
                    this.property = tokens[2];
                }
            }
        },
        watch: {
            subDimension: function () {
                this.dimension[this.index] = this.subDimension;
                console.log( this.dimension[this.index]);
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>

</style>